<div v-bind:class="[componentId]" class="configurations">
    <cly-header>
        <template v-slot:header-left>
            <h2> SDK Configuration (Experimental) </h2>
            <cly-tooltip-icon :tooltip="description" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
        </template>
    </cly-header>
    <cly-main>
        <div v-if="!isTableLoading" class="bu-columns bu-is-gapless">
            <div class="bu-column bu-is-12 selected-config">
                <form>
                    <div :id="group.label" :key="index" v-for="(group, index) in groups">
                        <h3 v-if="group.label" class="bu-mb-4"> 
                            {{group.label}}
                            <cly-tooltip-icon class="ion ion-help-circled" placement="bottom"></cly-tooltip-icon>
                        </h3>
                        <cly-section class="bu-mr-5 bu-mb-4">
                            <template slot-scope="scope">
                                <div 
                                    v-for="key in group.list" :key="key"
                                    class="bu-columns bu-is-vcentered bu-p-5 config-section">
                                    <div class="bu-column bu-is-7">
                                        <p class="bu-has-text-weight-medium">{{getData[key].name}}</p>
                                        <p class="bu-has-text-weight-normal bu-mt-2" v-html="getData[key].description" v-if="getData[key].description"></p>
                                    </div>
                                    <div class="bu-column bu-is-2"></div>
                                    <div class="bu-column bu-is-3 bu-is-flex bu-is-justify-content-end">
                                            <div 
                                                v-if="getData[key].type === 'function'" 
                                                v-html="getData[key].render(getData[key])">
                                            </div>
                                            <el-input
                                                v-else-if="getData[key].type === 'text'" 
                                                @input="onChange(key, $event)"
                                                :value="getData[key].value || getData[key].default"
                                                v-bind="getData[key].attrs"
                                                >
                                            </el-input>
                                            <el-select 
                                                v-else-if="getData[key].type === 'select'" 
                                                @change="onChange(key, $event)"
                                                :value="getData[key].value || getData[key].default"
                                                v-bind="getData[key].attrs">
                                                <el-option :key="option.value" :value="option.value" :label="option.label" v-for="option in getData[key].list"></el-option>
                                            </el-select>
                                            <el-slider 
                                                v-else-if="getData[key].type === 'slider'" 
                                                @change="onChange(key, $event)"
                                                :value="getData[key].value || getData[key].default"
                                                v-bind="getData[key].attrs">
                                            </el-slider>
                                            <el-button
                                                v-else-if="getData[key].type === 'button'" 
                                                @click="getData[key].click()"
                                                v-bind="getData[key].attrs">
                                                {{getData[key].name}}
                                            </el-button>
                                            <el-switch 
                                                v-else-if="getData[key].type === 'switch'"
                                                @change="onChange(key, $event)"
                                                v-model="getData[key].value"
                                                v-bind="getData[key].attrs">
                                            </el-switch>
                                            <el-input-number 
                                                v-else-if="getData[key].type === 'number'" 
                                                @change="onChange(key, $event)"
                                                :max='2147483647' 
                                                :min='0' 
                                                :value="getData[key].value || getData[key].default"
                                                v-bind="getData[key].attrs">
                                            </el-input-number>
                                            <cly-colorpicker 
                                                v-else-if="getData[key].type === 'colorpicker'" 
                                                :value="getData[key].value || getData[key].default"
                                                @change="onChange(key, getData[key])"
                                                v-bind="getData[key].attrs"
                                                style="display:inline">
                                            </cly-colorpicker>
                                            <el-upload
                                                v-else-if="getData[key].type === 'image'" 
                                                :show-file-list="false"
                                                :before-upload="getData[key].before"
                                                :on-success="getData[key].success"
                                                :on-error="getData[key].error"
                                                v-bind="getData[key].attrs">
                                                <div :class="getData[key].image_size">
                                                    <div v-if="getData[key].value" class="image-delete bu-is-flex">
                                                        <el-button 
                                                        size="small" 
                                                        type="text" 
                                                        @click.stop="onChange(key, '')"
                                                        class="bu-p-0">{{i18n('management-users.delete-logo')}}</el-button>
                                                        <img :src="getData[key].value + '?' + Date.now()">
                                                    </div>
                                                    <div v-else class="bu-is-flex">
                                                        <el-button type="default" style="display:flex;margin:auto;">{{i18n('white-labeling.choose-file')}}</el-button>
                                                        <el-button type="default" disabled style="width: 165px;height: 50px;cursor: default;">{{i18n('white-labeling.logo-preview')}}</el-button>
                                                    </div>
                                                </div>
                                                <span class="config-error">{{getData[key].errorMessage || ""}}</span>
                                            </el-upload>
                                            <el-input 
                                                v-else
                                                @input="onChange(key, $event)"
                                                :value="getData[key].value || getData[key].default">
                                            </el-input>
                                        </div>
                                        </div>
                                    </template>
                                </cly-section>
                            </div>
                        </form>
                    </div>
                </div>
        <cly-diff-helper :diff="diff" @discard="unpatch" @save="save"></cly-diff-helper>
    </cly-main>
</div>
